<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <title>设备管理</title>
</head>
<body>
<div class="container-fluid pt-20">
    <div class="text-right mt-25 mb-5 f-16">总共 <span class="total-num">0</span> 条</div>
    <table id="table-device" class="table table-bordered table-striped table-hover text-center">
        <thead>
        <tr class="text-c">
            <th class="text-c">序号</th>
            <th class="text-c">mac</th>
            <th class="text-c">分组</th>
            <th class="text-c">部署位置</th>
            <th class="text-c">连接状态</th>
            <th class="text-c">工作状态</th>
            <th class="text-c">操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="dataVessel" style='margin-top:30px;text-align:center;width:100%;font-size:18px;'></div>
    <div id="paging-bar" style="text-align:center;margin-top: 15px;"></div>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->

<!--<script src="../../js/bootstrap.min.js" type="text/javascript"></script>-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function Device() {
            this.getData();
            this.submitEvent();
            this.click();
        }

        Device.prototype = {
            page: 1,
            dataVessel: $("#dataVessel"),
            click: function () {
                var _this = this;
                $("#paging-bar").on("click", function () {
                    var that = $(this);
                    setTimeout(function () {
                        _this.page = that.find(".laypage_curr").text();
                    }, 0);
                });
            },
            getData: function () {
                var _this = this;
                var url, param, method;
                url = url_join("tanba/list");
                method = "post";
                param = {limit: 100};

                T.ajaxPaging(url, method, param, function (res) {
                    var data = typeof res == "object" ? res.data : [];
                    if (data.items.length > 0) {
                        _this.render(data);
                        _this.dataVessel.text("");
                        _this.loop();
                        T.pagingAll(
                            {
                                bar: 'paging-bar',
                                sum: data.total_pages,
                                callback: function (obj) {
                                    param.page = obj.curr;
                                    T.ajaxSecret(url, method, param, function (res) {
                                        var data = res.data;
                                        _this.dataVessel.text("");
                                        if (data.items.length > 0) {
                                            _this.render(data);
                                        } else if (data.items.length == 0) {
                                            _this.dataVessel.text("没有相关数据..");
                                        }
                                    });
                                },
                            }
                        );
                    } else if (data.items.length == 0) {
                        $("#paging-bar").hide();
                        _this.dataVessel.text("没有相关数据..");
                    }
                });
            },
            render: function (data) {
                var _this = this, color = "", work_color;
                var vessel = $("#table-device tbody");
                vessel.html("");
                $(".total-num").text(data.total_items);
                if (data.items.length > 0) {
                    $.each(data.items, function (i, v) {
                        color = "c-success", work_color = "c-success";
                        if (!v.status) color = "text-muted";
                        if (v.work_status != "正常") work_color = "text-danger";

                        var tr = $(
                            '<tr>' +
                            '<td width="50">' + (data.limit * (data.current - 1) + 1 + i) + '</td>' +
                            '<td>' + v.mac + '</td>' +
                            '<td>' + v.type_name + '</td>' +
                            '<td>' + v.position_name + '</td>' +
                            '<td class="status"><span class="' + color + '">' + (v.status?'正常':'离线') + '</span></td>' +
                            '<td><span class="' + work_color + '">' + v.work_status + '</span></td>' +
                            '<td><a href="javascript:void(0)" class="btn-reset" data-id="' + v.id + '" data-mac="'+v.mac+'"><span class="btn-reset glyphicon glyphicon-refresh" style="margin-top:-4px;vert-align: middle"></span> 重启设备</a></td>' +
                            '</tr>'
                        );
                        vessel.append(tr);
                    });
                } else {
                    $("#paging-bar").hide();
                    vessel.append("<tr><td colspan='5' class='f-20'>没有相关数据..</td></tr>");
                }
            },
            submitEvent: function () {
                var _this = this;
                $("#table-device").on("click", ".btn-reset", function () {
                    var that = $(this);
                    var status = that.parents("tr").find(".status");
                    if (status.children("span").text() == "离线") {
                        layer.msg("设备已离线,无法重启", {icon: 7});
                        return false;
                    }
                    status.html("<span class='c-danger'>重启中..</span>");

                    if (window.ws){
                        var data = {
                            type: 'command',
                            command: "setreboot",
                            deviceid: that.data('mac'),
                            data: {type : 1}
                        };
                        window.ws.send(JSON.stringify(data));

                    }else{
                        var data = {
                            type: 'command',
                            command: "setreboot",
                            deviceid: that.data('mac'),
                            data: {type : 1}
                        };

                        // var url = url_join('').replace(/^http:/,'ws:').replace(/\d\d\d\d\/$/,'9511/');
                        var url = 'ws://10.10.10.201:9511';
                        window.ws = T.webSocketEvent(url,data,function (res){
                            var data = JSON.parse(res);
                            if (data.token !=0){
                                setTimeout(function (){
                                    status.html("<span class='c-success'>在线</span>");
                                },3000);
                            }
                        });
                    }

                    /*
                    var status = that.parents("tr").find(".status");
                    if (status.children("span").text() == "离线") {
                        layer.msg("设备已离线,无法重启", {icon: 7});
                        return false;
                    }
                    T.ajaxSecret(url_join("tanba/restart"), "post", {id: id}, function (res) {
                        status.html("<span class='c-danger'>重启中..</span>");
                        _this.getContinue(id, status);
                    });*/
                });
            },
            // 检查重启进度.
            getContinue: function (id, status) {
                var _this = this;
                var handle = setInterval(function () {
                    T.ajaxSecret(url_join("tanba/check"), "post", {id: id}, function (res) {
                        if (res.data == 0) {
                            status.html("<span class='c-danger'>重启中..</span>");
                        } else {
                            status.html("<span class='c-success'>在线</span>");
                            clearInterval(handle);
                        }
                    });
                }, 1000 * 10);

            },
            // 定时循环
            loop: function () {
                var _this = this;
                var url = url_join("tanba/list"), method = "post";
                console.log("page2: ", _this.page);
                setInterval(function () {
                    console.log("page3: ", _this.page);
                    var param = {limit: 10, page: _this.page};
                    T.ajaxSecret(url, method, param, function (res) {
                        var data = res.data;
                        _this.dataVessel.text("");

                        if (data.items.length > 0) {
                            _this.render(data);
                        } else if (data.items.length == 0) {
                            _this.dataVessel.text("没有相关数据..");
                        }
                    });
                }, 1000 * 60 * 2);
            },

        };
        new Device();
    });
</script>
</body>
</html>